<template>
  <div class="date-mul-picker-wrap">
    <div v-if="!isExhibition" :class="{'mobile-create-flex': showMobilePage}" class="stages-box">
      <div class="stages">
        <div v-for="(item, index) in selectData" :key="index" class="date-picker-item stages-date-picker-error" >
          <el-form-item :rules="rules[moduleName + '.' + targetField]" :prop="moduleName + '.' + index + '.' + targetField">
            <stages-date-picker :index="index" v-model="item[targetField]" @delete="deleteStage" />
          </el-form-item>
        </div>
      </div>
      <div class="add-btn" @click="add">
        添加
      </div>
    </div>
    <div v-else>
      <div v-for="(item, index) in selectData" :key="index" >
        {{ `付款日期（第${index + 1}期）: ` }}{{ item[targetField] / 1000 | standardFormat('YYYY/MM/DD') }}
      </div>
    </div>
  </div>
</template>
<script>
import StagesDatePicker from './stagesDatePicker';
import addIcon from '@/assets/reportManage/add_icon.png';
import { standardFormat } from '@/filters/date';
import { mapState } from 'vuex';
export default {
  name: 'DateMulPicker',
  components: { StagesDatePicker },
  filters: {
    standardFormat
  },
  model: {
    prop: 'params',
    event: 'change'
  },
  props: {
    params: {
      type: Array,
      default: () => {
        return null;
      }
    },
    moduleName: {
      type: String,
      default: ''
    },
    targetField: {
      type: String,
      default: ''
    },
    rules: {
      type: Object,
      default: () => {
        return null;
      }
    },
    isExhibition: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      addIcon
    };
  },
  computed: {
    ...mapState({
      'showMobilePage': state => state.app.showMobilePage
    }),
    selectData: {
      get() {
        return this.params;
      },
      set(val) {
        this.$emit('change', val);
      }
    }
  },
  methods: {
    add() {
      const item = { payDate: '' };
      this.selectData.push(item);
    },
    deleteStage(index) {
      if (index !== -1) {
        this.selectData.splice(index, 1);
      }
    }
  }
};
</script>
<style lang="scss" scoped>
@import url('./common.scss');
.stages-box {
  margin-top: 0;
  min-width: 100px;
}
.stages-date-picker-error {
  & ::v-deep {
    .el-form-item__error {
      margin-left: 120px;
    }
  }
}
.add-btn {
  margin-left: 0;
}
.mobile-create-flex {
  ::v-deep {
    .el-form-item {
      margin-bottom: 16px !important;
    }
    .el-form-item__error {
      margin-left: 0 !important;
    }
  }
  .stage-items {
    flex-wrap: wrap;
  }
  .date-picker-item {
    margin-bottom: 0 !important;
  }
}
</style>
